<template>
  <div class='header' >
      <div class='h-left'>
        <span class='iconfont'>&#xe604; </span>
      </div>
      <div class='h-search'>
        <span class='iconfont'>&#xe607;</span>
        输入城市/景点/游玩主题
      </div>
      <div class='h-right'>
        <router-link to="/city">
         {{city}}
          <span class='iconfont'>&#xe64a;</span>
        </router-link>
        
      </div>
  </div>
</template>

<script>

import {mapState} from "vuex"

export default {
  name: 'Header',
  computed: { 
            ...mapState([
                'city'
            ]),
           
        }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='stylus'>
  @import '~css/web.styl'
  .header{
    width:100%;
    line-height:.88rem;
    background:$bgColor;
    color: #fff;
    font-size: .36rem;
    display: flex;
  }
  .h-left{
    width: .4rem;
    padding:0 .2rem;
    text-align: center;
    font-weight: bold;
  }
  .h-search{
    flex: 1;
    background: #fff;
    height: .66rem;
    margin-top: .11rem;
    border-radius: .1rem;
    line-height: .66rem; 
    color: #e4e7ea;
    font-size: .28rem;
    padding-left: .1rem;

  }
  .h-right{
    padding:0 .2rem;
    font-size: .28rem;
  }
  .h-right a{
    color #fff
  }
  .h-right span{
    font-size: .24rem;
  }
</style>
